<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
</head>
<body>
    <div>
        <h3> PHP + Mysql 用户登录  </h3>
        <div class="form">
            <div>
                <label for="user">用户名</label>
                <input type="text" id="user" placeholder="请输入用户名">
            </div>
            <div>
                <label for="pass">密码</label>
                <input type="password" id="pass" placeholder="请输入密码">
            </div>
            <div>
                <button id="savebtn" >登录</button>
            </div>
        </div>
    </div>

    <script>
        // 获取元素 
        var userInp = document.getElementById("user")
        var passInp = document.getElementById("pass")

        var savebtn = document.getElementById("savebtn")
        
        function checkLogin(user,pass){
            var p = new Promise(function(resolve,reject){
                $.ajax({
                    url:"../php/login.php",
                    type:"post",
                    data:{
                        user,
                        pass
                    },
                    dataType:"json",
                    success:result=>{
                        console.log(result)
                        const {status,detail} = result
                        if(status){
                            // 登录成功
                            resolve(detail)
                        }else{
                            // 登录失败
                            reject(detail)
                        }
                    }
                })
            })
            return p;   // then(成功回调,失败回调)
        }

        savebtn.onclick = function(){
            var user = userInp.value
            var pass = passInp.value 
            if(user&&pass){
                checkLogin(user,pass)
                .then((msg)=>{
                    console.log("登录 成功时候的回调函数 " , msg)
                    setCookie("loginAccount",user,7);
                    // location.href = './home.html';
                    alert(msg)
                },msg=>{
                    console.log("登录 失败时候的回调函数 " , msg)
                    location.reload();
                })
                // ajax 异步函数 
                // $.ajax({
                //     url:"../php/login.php",
                //     type:"post",
                //     data:{
                //         user,
                //         pass
                //     },
                //     dataType:"json",
                //     success:result=>{
                //         console.log(result)
                //         const {status,detail} = result
                //         if(status){
                //             // 登录成功
                //             setCookie("loginAccount",user,7);
                //             // location.href = './home.html';
                //             alert(detail);
                //         }else{
                //             // 登录失败
                //             alert(detail);
                //         }
                //     }
                // })
                
                // new 实例化  then 
                // Promies 的状态
                // pedding 
                // fulfilled
                // reject 
                // var p = new Promise(function(resolve,reject){
                //     $.ajax({
                //         url:"../php/login.php",
                //         type:"post",
                //         data:{
                //             user,
                //             pass
                //         },
                //         dataType:"json",
                //         success:result=>{
                //             console.log(result)
                //             const {status,detail} = result
                //             if(status){
                //                 // 登录成功
                //                 resolve(detail)
                //             }else{
                //                 // 登录失败
                //                 reject(detail)
                //             }
                //         }
                //     })
                // })

                // p.then((msg)=>{
                //     console.log("ajax 成功时候的回调函数 " , msg)
                // },(msg)=>{
                //     console.log("ajax 失败时候的回调函数 " , msg)
                // })
            }else{
                alert("请先完善登录信息")
            }

        }
    </script>
</body>
</html>